<!-- 来源于 Geeker-Admin 封装的组件 https://gitee.com/laramie/Geeker-Admin-->
<template>
	<view class="pt-15px">
		<el-form ref="searchFormRef" :model="searchForm">
			<dx-grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol">
				<dx-grid-item v-for="(item, index) in columns" :key="item.field" v-bind="getResponsive(item)" :index="index">
					<el-form-item :label="`${item.label} :`" :prop="item.field">
						<slot :name="`search-${item.field}`" :row="searchForm">
							<dx-search-item :column="item" :searchParam="searchForm" />
						</slot>
					</el-form-item>
				</dx-grid-item>
				<dx-grid-item suffix>
					<div class="operation">
						<el-button type="primary" @click="search">
							<dx-icon color="#ffffff" size="16" :name="searchIcon"></dx-icon>
							<text>{{ searchText }}</text>
						</el-button>
						<el-button type="info" @click="reset">
							<dx-icon color="#ffffff" size="16" :name="resetIcon"></dx-icon>
							<text>{{ resetText }}</text>
						</el-button>
						<el-button v-if="showCollapse" type="primary" class="search-isOpen" @click="collapsed = !collapsed">
							{{ collapsed ? '展开' : '折叠' }}
							<dx-icon color="#ffffff" size="16" :name="collapsed ? 'double-down' : 'double-up'"></dx-icon>
						</el-button>
					</div>
				</dx-grid-item>
			</dx-grid>
		</el-form>
	</view>
</template>
<script setup lang="ts" name="dxSearch">
import { computed, ref, reactive } from 'vue';
import { BreakPoint } from '../../types/interface';

const props = withDefaults(
	defineProps<{
		columns: any;
		searchCol?: { [key: string]: any };
		isCollapsed?: boolean;
		resetText?: string;
		resetIcon?: string;
		searchIcon?: string;
		searchText?: string;
	}>(),
	{
		columns: [],
		searchCol: () => ({ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }),
		isCollapsed: true,
		resetText: '重置',
		searchText: '搜索',
		resetIcon: 'delete',
		searchIcon: 'search',
	}
);
// 获取响应式设置
const getResponsive = (item: any) => {
	return {
		span: item.search?.span,
		offset: item.search?.offset ?? 0,
		xs: item.search?.xs,
		sm: item.search?.sm,
		md: item.search?.md,
		lg: item.search?.lg,
		xl: item.search?.xl,
	};
};
// 表单
const searchForm = reactive<any>({});
// 渲染字段
props.columns.map((item: any) => {
	searchForm[item.field] = item?.value;
});
// 是否默认折叠搜索项
const collapsed = ref(props.isCollapsed);
// 获取响应式断点
const gridRef = ref();
// 表单ref
const searchFormRef = ref();
const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint);
// 判断是否显示 展开/合并 按钮
const showCollapse = computed(() => {
	let show = false;
	props.columns.reduce((prev: number, current: any) => {
		let search = current.search || {};
		prev +=
			(search![breakPoint.value]?.span ?? search?.span ?? 1) +
			(search![breakPoint.value]?.offset ?? search?.offset ?? 0);
		if (typeof props.searchCol !== 'number') {
			if (prev > props.searchCol[breakPoint.value]) show = true;
		} else {
			if (prev > props.searchCol) show = true;
		}
		return prev;
	}, 0);
	return show && props.isCollapsed;
});
const $emit = defineEmits(['reset', 'search']);
function reset() {
	searchFormRef.value.resetFields();
	$emit('reset');
}
// 搜索
function search() {
	let param: any = {};
	props.columns.map((item: any) => {
		let value = searchForm[item.field];
		if (value || value === false || value === 0) {
			if (item.operator) {
				param[item.field] = [item.operator, value];
			} else {
				param[item.field] = value;
			}
		}
	});
	$emit('search', param);
}
</script>
<style lang="scss" scoped>
.operation {
	display: flex;
	justify-content: flex-end;
}
::v-deep {
	.el-select {
		flex: 1;
	}
	.el-button + .el-button {
		margin-left: 6px;
	}
}
</style>
